<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import api from "@/api/api";

// 响应式数据
const pageInfo = ref({
  pageSize: 10,
  pageNum: 1,
})
const list = ref([])
const loading = ref(false)
const finished = ref(false)

// 路由
const router = useRouter()

// 方法定义
const onClickLeft = () => {
  router.back()
}

const getWeiquanList = async () => {
  let res = await api.common.getWeiquanList({
    ...pageInfo.value,
    type: 1,
  })
  list.value = [...list.value, ...res.data]
  if (res.data.length < pageInfo.value.pageSize) {
    finished.value = true
  } else {
    pageInfo.value.pageNum++
  }
  loading.value = false
}

const onLoad = () => {
  getWeiquanList()
}

const tagName = (status) => {
  if (status == 0) {
    return "审核中"
  } else if (status == 1) {
    return "处理中"
  } else if (status == 97) {
    return "已驳回"
  } else if (status == 100) {
    return "已完成"
  } else if (status == 98) {
    return "已失效"
  } else {
    return "已取消"
  }
}

const tagType = (status) => {
  if (status == 0) {
    return "primary"
  } else if (status == 1) {
    return "danger"
  } else if (status == 100) {
    return "success"
  } else {
    return "#7232dd"
  }
}
</script>
<template>
  <div class="weiquan">
    <van-nav-bar class="nav_bar" title="我的维权" fixed @click-left="onClickLeft" />
    <div class="list">
      <van-list v-model:loading="loading" :finished="finished" :finished-text="list.length > 0 ? '没有更多了' : ''"
        @load="onLoad">
        <div v-for="(v, i) in list" :key="i" class="item">
          <div class="t1 flex">
            <div class="l1">诉求人：{{ v.memberName }}</div>
            <div class="tag">
              <van-tag :type="tagType(v.status)" :color="tagType(v.status)">{{
                tagName(v.status)
              }}</van-tag>
            </div>
          </div>
          <div class="t1">问题描述： {{ v.description }}</div>
          <div class="t1">提交时间：{{ v.createTime }}</div>
          <div v-if="v.feedBack" class="t1">客服反馈：{{ v.feedBack }}</div>
          <div class="t1">维权进度：{{ tagName(v.status) }}</div>
        </div>
        <van-empty v-if="list.length == 0 && !loading" description="暂无维权信息" />
      </van-list>
    </div>
  </div>
</template>



<style lang="less" scoped>
.weiquan {
  min-height: 100vh;
  background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/44dea588672142d48f873df92c7b625e.jpg") no-repeat;
  background-size: contain;
  background-attachment: fixed;
  background-position: top;
  box-sizing: border-box;
  background-color: #fff;
  padding: 150px 0;

  :deep(.nav_bar) {
    background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/44dea588672142d48f873df92c7b625e.jpg") no-repeat;
    background-size: cover;
    background-position: top center;

  }

  :deep(.van-nav-bar__content) {
    height: 100px;
    margin: 25px auto;
  }

  :deep(.van-nav-bar__title) {
    font-size: 54px;
    color: #fff;
    font-weight: 500;
  }

  :deep(.van-ellipsis) {
    overflow: initial;
  }

  :deep(.van-hairline--bottom::after) {
    border: unset;
  }

  .list {
    margin-top: 30px;
    padding: 0 30px 60px 30px;

    .item {
      margin-bottom: 25px;
      padding: 40px;
      background: #fff;
      border-radius: 15px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

      .t1 {
        font-size: 44px;
        color: #000;
        padding: 15px 0;
      }

      .flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
}

:deep(.van-empty) {
  padding: 100px 0;
}

:deep(.van-empty__image) {
  width: 550px;
  height: 550px;
}

:deep(.van-empty__description) {
  font-size: 48px;
}

:deep(.van-empty__description) {
  margin-top: 100px;
}
</style>
